<template>
    <view class="page">
        <view  
        v-for="item,index in videoScriptArr" 
        :key="index" 
        class="content"
        @click="chooseScript(index)"
        :class="[ isShow === index? 'active':'' ]"
        
        >
            <view>
                <text style="font-size: 32rpx;margin-bottom: 12rpx;font-weight: 700;">{{shopArr[i].shopCate2Obj.shopCate2Name+'拍摄脚本'+(index+1)}}</text>
                <view class="content-text">
                    <text style="margin-top: 16rpx;">场景{{index+1}}：{{ item.captureScript2On1.script2Content }}</text>
                    <text style="margin-top: 16rpx;">场景{{index+2}}：{{ item.captureScript2On2.script2Content }}</text>
                    <text style="margin-top: 16rpx;">场景{{index+3}}：{{ item.captureScript2On3.script2Content }}</text>
                </view>
            </view>
            <image v-if="isShow === index" class="img" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_xzong.png"></image>
        </view>
        <view style="height: 100rpx;">
            <view class="bottom">
                <button class="bottom-quxiao" @click="goBack()">取消</button>
                <button class="bottom-queren" @click="queren()">确认</button>
            </view>
        </view>
    </view>
</template>

<script>
import { httpRequest } from '../../utils/http';
export default {
    name: 'UniPresetVueVite1Script',

    data() {
        return {
            i:'',
            shopArr:[],
            videoScriptArr:[],
            isShow:0
        };
    },
    onLoad(e) {
        this.i = e.index
        this.shopArr = uni.getStorageSync('shop')
        this.getVideoScript()
    },
    methods: {
        async getVideoScript (){
		//获取脚本数据
		const res = await httpRequest('/api/captureScript12','POST',{shopCate2Id:this.shopArr[this.i].shopCate2Obj.shopCate2Id})
		console.log(res.data);
		this.videoScriptArr = res.data
	},
    chooseScript(index){
        this.isShow = index
    },
    goBack(){
        uni.navigateBack({ delta: 1 })
    },
    queren(){
        uni.setStorageSync('script',this.videoScriptArr[this.isShow])
        uni.setStorageSync('nonrandom',1)
        // uni.redirectTo({ url: `/pageA/index/chooseVideo?scriptArr=${JSON.stringify(this.videoScriptArr[this.isShow])}` })
        uni.navigateBack({ delta: 1 })
    }
    },
};
</script>

<style lang="scss" scoped>
.page{
    padding: 24rpx 32rpx;
    background-color: rgba(241,241,241,1);
    .content{
        position: relative;
        padding: 12rpx;
        background-color: #fff;
        border-radius: 16rpx;
        padding-top: 20rpx;
        margin-bottom: 24rpx;
        padding-bottom: 36rpx;
        border: 1px solid #fff;
        .img{
        position: absolute;
        top: 0;
        right: 0;
        width: 72rpx;
        height: 48rpx;
    }
        .content-text{
            font-size: 14px;
            color: rgba(69,70,74,1);
            display: flex;
            flex-direction: column;
            margin-top: 16rpx;
            font-size: 28rpx;
            color: rgba(69,70,74,1);
        }
    }
    .bottom{
    position: fixed;
    bottom: 34rpx;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    .bottom-quxiao{
    width: 330rpx;
    height: 86rpx;
    text-align: center;
    line-height: 88rpx;
    color: rgba(142,84,244,1);
    border: 1px solid rgba(142,84,244,1);
}
.bottom-queren{
    width: 332rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    background-color: rgba(142,84,244,1);
    color: #fff;
}
}
}
.active{
    border: 1px solid rgba(142,84,244,1) !important;
}
   


</style>